<template>
	<view class="app_Cont">
		<view class="showCont" v-if="showCont">
			<view class="bannerCont">
				 <u-swiper
					:list="bannerArr"
					@click="bannerClick"
					indicator
					height="200"
					indicatorMode="line"
					circular
				></u-swiper>
			</view>
			<view class="headCard">
				<view class="headName">
					<view>{{formData.training_name}}</view>
				</view>
				<view class="headCardInfo">
					<view class="tagItem">{{formData.training_type}}</view>
					<view class="signNum">已报名：{{formData.bm_people}}人</view>
				</view>
				<view class="shoolCont">
					<image class="schoolImg" :src="formData.school_info.school_logo"></image>
					<view class="shool_left">
						<view class="shoolName">{{formData.training_school_name}}</view>
						<view class="shoolAddress">
							<view class="iconfont icon-dizhi"></view>
							<view class="addressText">{{formData.training_address}}</view>
						</view>
					</view>
					<view class="addressBtn" @click="toShool">查看主页</view>
				</view>
				<view class="navCont">
					<view @click="navFn(item)" :class="navId==item.id?'navItem navActive':'navItem'" :key="index" v-for="(item,index) in navArr">
						<view>{{item.name}}</view>
						<view class="activeLine"></view>
					</view>
				</view>
			</view>
			<view id="navCont0">
				<view class="cardItem noTop">
					<view class="cardHead">课程安排</view>
					<view class="cardForm">
						<view class="formItem">
							<view class="formName">开课时间</view>
							<view class="formText">{{formData.training_sk_time}}</view>
						</view>
						<view class="formItem formItemPlain">
							<view class="formName">考试时间</view>
							<view class="formText formTextPalin">{{formData.training_ks_time}}</view>
						</view>
						<view class="formItem">
							<view class="formName">培训时长</view>
							<view class="formText">{{formData.training_time}}</view>
						</view>
						<view class="formItem formItemPlain">
							<view class="formName">报道时间</view>
							<view class="formText formTextPalin">{{formData.report_time}}</view>
						</view>
						<view class="formItem">
							<view class="formName">报道地点</view>
							<view class="formText">{{formData.training_address}}</view>
						</view>
						<view class="formItem">
							<view class="formName">招收名额</view>
							<view class="formText">{{formData.training_people}}人</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cardItem">
				<view class="cardHead">报名条件</view>
				<view class="cardInfo textWrap">
					{{getInfoText(formData.bmtj)}}
				</view>
			</view>
			<view class="cardItem">
				<view class="cardHead">培训内容</view>
				<view class="cardInfo textWrap">
					{{getInfoText(formData.pxnr)}}
				</view>
			</view>
			<view id="navCont1">
				<view class="cardItem noTop" >
					<view class="cardHead cardFlex">
						<view>费用说明</view>
						<view class="cardMoney">合计：¥{{formData.total_money}}</view>
					</view>
					<view class="cardForm">
						<view :class="index%2==0?'formItem ':'formItem formItemPlain'" :key="index" v-for="(item,index) in formData.tuition_fee_data">
							<view class="formName">{{item.name}}</view>
							<view :class="index%2==0?'formText':'formText formTextPalin'">
								<view>
									<text v-if="index==0">{{item.content}}<text class="redText">（¥{{item.money}}）</text></text>
									<text v-if="index>0">
										<text v-if="Number(item.money)">需到校缴费<text class="redText">（¥{{item.money}}）</text></text>
										<text v-if="!Number(item.money)">已含在培训费内，无需额外缴纳</text>
									</text>
								</view>
								<view class="formTextDes" v-if="index>0&&item.content">说明：{{item.content}}</view>
							</view>
						</view>
					</view>
					<view class="formOtherDes textWrap">
						{{getInfoText(formData.tuition_fee_remark)}}
					</view>
				</view>
			</view>
			<view class="cardItem">
				<view class="cardHead">报道须知</view>
				<view class="cardInfo textWrap">
					{{getInfoText(formData.bdxz)}}
				</view>
			</view>
			
			<view class="cardItem">
				<view class="cardHead">特别提醒</view>
				<view class="cardInfo textWrap">
					{{getInfoText(formData.tbtx)}}
				</view>
			</view>
			<view class="companyCont">
				<view class="comImg">
					<image :src="formData.training.training_logo"></image>
				</view>
				<view class="comInfo">
					<view class="comName">{{formData.training.training_person}}</view>
					<view class="comText">{{formData.training.training_mobile}}</view>
				</view>
				<view class="telBtn" @click="telFn">电话咨询</view>
			</view>
			<view class="cardItem">
				<view class="cardHead">售后保障</view>
				<view class="cardInfo">
					<view>
						临近开班退学或改期，会导致名额不能充分被渴望学习的其它学员获得，因此制定以下退学和改期规则:
					</view>
					<view>(1)开班前5个工作日及以上(含第5日)，可无条件改期或全额退款:</view>
					<view>
						(2)开班前1-4个工作日(含第4日)可申请退款，但需扣取培训费的10%(最低50元，最高1000元)作为退订费:
					</view>
					<view>
						(3)开班当天及以后需改期或退学，费用将无法退还
					</view>
					<view>
						(4)按学校要求，学校将您的信息报备海事局后，费用将无法退还;但一般学校只在开班前几天报备海事局,无需过度度无担心。
					</view>
				</view>
			</view>
			<view id="navCont2">
				<view class="cardItem noTop" >
					<view class="cardHead">消费者告知书</view>
					<view class="cardInfo">
						<view>
							1.培训安排以学校通知为准，如遇培训临时取消、延期或提前等情况，航运e家会尽快以短信，微信消息或电话形式通知您，并协助您处理后续操作,航运e家无法承担因学校临时变更对您造成的损失。
						</view>
						<view>
							2.若在您报名成功后、课程开始前，学校调整培训费用,航运e家将与您按学校发布的最新价格进行结算，多退少补,
						</view>
						<view>
							3.如有疑问，可与航运e家老师联系，联系方式可在“我的订单”内查询,也可联系在线客服进行处理。
						</view>
						<view>
							详细服务协议，请见《航运e家培训报名服务协议》
						</view>
					</view>
				</view>
			</view>
			<view class="cardItem">
				<view class="cardHead">小贴士</view>
				<view class="reportTip">
					若发现培训信息涉及虚假、不实等情况，请立即<text class="reportText" @click="showReport = true">立即举报</text>
				</view>
			</view>
			<view class="underFlex">
				<view class="underPrice"><span class="smallText">订金：</span> ¥{{formData.bm_money}}</view>
				<view :class="checkDisSign()?'ctrlBtn disBtn':'ctrlBtn'"  @click="signFn">{{checkDisSign()?'你已报名':'立即报名'}}</view>
			</view>
		</view>
		<u-popup :show="showReport" @close="showReport = false" :closeOnClickOverlay="true" :safeAreaInsetBottom="false" mode="bottom" :round="10">
			<view class="reportCont">
				<view class="reportValue">
					<textarea v-model="report_content" placeholder="请详细描述举报信息" ></textarea>
				</view>
				<view class="reportBtn" @click="sureReport">确认举报</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
		<load v-if="!showCont"></load>
		<subLoad v-if="showSub"></subLoad>
	</view>
</template>

<script>
	import converData from "@/utils/converData";
	import api from '@/http/api.js'
	import load from '@/components/load.vue'
	import subLoad from '@/components/sub.vue'

	export default {
		components:{load,subLoad},
		data() {
			return {
				showSub:false,
				showCont:false,
				showModal:false,
				getInfoText:converData.changeLine,
				detailId:'',
				showReport:false,
				report_content:'',
				bannerArr:[],
				formData:{},
				navArr:[
					{name:'课程介绍',id:0,url:'#navCont0'},
					{name:'收费明细',id:1,url:'#navCont1'},
					{name:'报名流程',id:2,url:'#navCont2'},
				],
				navId:0,
				share:{
				   title: '鲸领航系统分享',
				   imageUrl:'https://whalenav.oss-cn-chengdu.aliyuncs.com/uploads/images/20241211/bde6c10f267dca4630622686023ae395bf821eba.jpg',
				}
			};
		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: this.share.title,
				imageUrl: this.share.imageUrl,
			}
		},
		onShareTimeline(res) {//分享到朋友圈
			return {
				title: this.share.title,
				imageUrl: this.share.imageUrl,
			}
		},
		methods:{
			telFn(){
				uni.makePhoneCall({
					phoneNumber:this.formData.training.training_mobile,
				})
			},
			scrollToElement(url) {
			  // 使用uni.pageScrollTo方法来滚动到指定位置
			  uni.pageScrollTo({
				selector: url,  // 目标元素的id
				duration: 300,                // 滚动动画持续时间，单位毫秒
			  });
			},
			sureReport(){
				let data = {
					training_content_id:this.detailId,
					report_content:this.report_content,
				}
				this.showSub = true
				api.getRequst(data,'/api//Training/trainingReport').then((res)=>{
					if(res.code==1){
						this.$refs.uToast.show({
							message:'举报成功',
						})
						this.report_content = ''
						this.getData()
						this.showSub = false
						this.showReport = false
					}
				})
			},
			checkDisSign(){
				if(this.formData.is_bm==2){
					return true
				}else{
					return false
				}
			},
			signFn(){
				if(!this.checkDisSign()){
					uni.navigateTo({
						url: '../signPay/signPay?id='+this.formData.training_content_id
					});
				}
			},
			bannerClick(index){
				
			},
			navFn(item){
				this.navId = item.id
				if(item.url){
					this.scrollToElement(item.url)
				}
			},
			
			toShool(){
				uni.navigateTo({
					url: '../school/school?id='+this.formData.training_school_id
				});
			},
			getData(){
				let data = {
					training_content_id:this.detailId,
				}
				api.getRequst(data,'/api/Training/details').then((res)=>{
					if(res.code==1){
						this.formData = res.data
						this.bannerArr = res.data.school_info.school_banner.split(',')
						this.share.title =res.data.training_name+" | 定金"+res.data.bm_money
						
					}
					this.showCont = true
				})
			},
		},
		onLoad(option) {
			this.detailId = option.id
			this.getData()
		},
	}
</script>

<style lang="scss">
	.showCont{
		box-sizing: border-box;
		min-height: 100vh;
		background-color: #f6f7f9;
		padding-bottom: 140rpx;
		.bannerCont{
			
		}
		.headCard{
			width: 100%;
			position: relative;
			margin-top: -30rpx;
			z-index: 2;
			background-color: #fff;
			border-radius: 30rpx 30rpx 0 0;
			padding: 30rpx 4% 0;
			box-sizing: border-box;
			.headName{
				font-size: 30rpx;
				font-weight: bold;
			}
			.headCardInfo{
				display: flex;
				margin-top: 20rpx;
				justify-content: space-between;
				align-items: center;
				.tagItem{
					padding: 7rpx 20rpx;
					font-weight: normal;
					color: #ff5757;
					border: 1px solid #ff5757;
					border-radius: 5rpx;
					font-size: 22rpx;
				}
				.signNum{
					color: #999;
					font-size: 24rpx;
				}
			}
			.shoolCont{
				margin-top: 25rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.schoolImg{
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					// border: 4rpx solid #3f55cc;
					margin-right: 30rpx;
				}
				.shool_left{
					flex: 1;
					width: 100rpx;
					margin-right: 30rpx;
					.shoolName{
						font-size: 28rpx;
					}
					.shoolAddress{
						display: flex;
						margin-top: 10rpx;
						align-items: center;
						color: #666;
						width: 100%;
						.addressText{
							flex: 1;
							width: 100rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.iconfont{
							margin-right: 15rpx;
						}
					}
				}
				.addressBtn{
					padding: 0 40rpx;
					font-size: 22rpx;
					background-image: linear-gradient(to right bottom,#89afff,#3f55cc);
					color: #fff;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 50rpx;
					box-sizing: border-box;
				}
			}
			.navCont{
				display: flex;
				padding: 40rpx 4% 0;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				box-sizing: border-box;
				background-color: #fff;
				.navItem{
					color: #000;
					text-align: center;
					display: flex;
					flex-direction: column;
					align-items: center;
					.activeLine{
						width: 60rpx;
						margin-top: 10rpx;
						height: 6rpx;
						border-radius: 6rpx;
						background-color: #fff;
					}
				}
				.navActive{
					color: #3f55cc;
					.activeLine{
						background-color: #3f55cc;
						// background-image: linear-gradient(to right,white,#3f55cc,white);
					}
				}
			}
		}
		#navCont0,#navCont1,#navCont2{
			padding-top: 30rpx;
		}
		.cardItem{
			width: 92%;
			margin: 30rpx auto;
			background-color: #fff;
			padding: 30rpx 4%;
			box-sizing: border-box;
			border-radius: 20rpx;
			.cardHead{
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}
			.cardFlex{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.cardMoney{
					color: #ff5757;
					font-size: 28rpx;
					font-weight: normal;
				}
			}
			.cardForm{
				border-radius: 20rpx;
				overflow: hidden;
				.formItem{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					background-color: #d6e0fb;
					.formName{
						padding:30rpx 20rpx;
						width: 140rpx;
						box-sizing: border-box;
					}
					
					.formText{
						flex: 1;
						padding:30rpx 20rpx;
						width: 100rpx;
						background-color: #ebf1fb;
						.formTextDes{
							color: #999;
						}
					}
					.formTextPalin{
						background-color: #dee3f8;
					}
				}
				.formItemPlain{
					background-color: #cbd3fa;
				}
			}
			.formOtherDes{
				color: #666;
				font-size: 24rpx;
				margin-top: 30rpx;
			}
		}
		.noTop{
			margin-top: 0;
		}
		.companyCont{
			padding: 30rpx;
			width: 92%;
			margin: 0 auto;
			margin-bottom: 30rpx;
			background-image: linear-gradient(to right bottom,#89afff,#3f55cc);
			color: #fff;
			border-radius: 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			.comImg{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				background-color: #fff;
				font-size: 0;
				padding: 5rpx;
				overflow: hidden;
				box-sizing: border-box;
				margin-right: 30rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.comInfo{
				flex: 1;
				width: 100rpx;
				.comName{
					width: 100%;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					font-size: 32rpx;
					font-weight: bold;
				}
				.comText{
					color: #fff;
					margin-top: 10rpx;
				}
			}
			.telBtn{
				padding: 10rpx 20rpx;
				font-size: 24rpx;
				border-radius: 6rpx;
				border: 1px solid #fff;
				margin-left: 10rpx;
			}
		}
		.underFlex{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #fff;
			padding: 30rpx 4%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.underPrice{
				color: #ff5757;
				font-size: 40rpx;
				.smallText{
					font-size: 24rpx;
				}
			}
			.ctrlBtn{
				width: 300rpx;
				text-align: center;
				box-sizing: border-box;
				padding: 22rpx;
				font-size: 24rpx;
				background-image: linear-gradient(to right bottom,#89afff,#3f55cc);
				// border: 1px solid #3f55cc;
				color: #fff;
				border-radius: 10rpx;
			}
			.disBtn{
				opacity: 0.5;
			}
		}
	}
</style>
